<template>
   <div class="f-pa f-bclos">
      <div class="f-bavg f-brow lig-cent">
          <div class="f-bavg f-bclos">
              <div class="f-bavg flex-cent">
                  <div class="lig-cir "></div>
              </div>
              <div class="f-bavg flex-cent">
                  <div class="lig-cir flex-cent">
                      <div class="lig-time">
                          <p class="lig-hour">{{times|dateFormat('hh:mm')}}</p>
                          <p>{{times | dateFormat('yyyy-MM-dd')}}</p>
                      </div>
                  </div>
              </div>
          </div>
          <div class="lig-infoList f-bclos">
              <div class="lig-infoTit f-brow">
                  <div class="lig-infoTit-name">模式信息</div>
                  <div class="f-bavg lig-infoTit-line"></div>
              </div>
              <div class="f-bavg f-iScroll"  ref="modDet">
                 <ul class="lig-ul">
                      <li v-for="item in modulesInfoList" :key="item.id">
                          <div class="li-icon floor-all" :class="getIcon(item.houseType)"></div>
                          <div class="li-name f-toe">楼层{{item.numText}}</div>
                          <div class="li-type" v-text="item.type == 0?'关闭':'开启'"></div>
                          <div class="li-model" :class="'m-'+item.moduleType"><p>{{getModulsText(item.moduleType)}}</p></div>
                          <div class="li-time">
                              <div class="li-time-icon f-ib"></div>
                              <div class="li-time-txt f-ib">{{item.time | dateFormat('hh:mm')}}</div>
                          </div>
                      </li>
                      
                  </ul>
              </div>
          </div>
      </div>
      <div class=" lig-ft flex-cent">
          <div class="lig-logo"></div>
      </div>
    </div>
</template>

<script>
import IScroll from 'iscroll'

export default {
  name: "Home",
  data() {
    return {
      times: "", //系统时间
      infoList: "", //iscroll 插件对象
      modulesInfoList: "" //模式信息
    };
  },
  created: function() {
    this.getModuleInfo();
    this.getSysTime();
  },
  mounted: function() {
    this.$nextTick(function() {
      this.infoList = new IScroll(this.$refs.modDet);
    });
  },
  updated: function() {
    this.$nextTick(function() {
      this.infoList.refresh();
    });
  },
  methods: {
    getModuleInfo() {
      this.$http
        .post(
          process.env.API_HOST + "/static/home.json",
          {},
          { headers: { 'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8' } }
        )
        .then(
          function(res) {
            // 处理成功的结果
            this.modulesInfoList = res.body.result;
          },
          function(error) {
            // 处理失败的结果
            console.log(error);
          }
        );
    },
    //获取时间
    getSysTime() {
      //$.ajax({ async: false }).getResponseHeader("Date")
      var date = new Date();
      this.times = date.getTime();

      setInterval(() => {
        this.times = this.times + 1000;
      }, 1000);
    },
    //获取 模式信息 图标
    getIcon(arg) {
      arg = parseInt(arg);
      switch (arg) {
        case 0:
          return "floor-all";
          break;
        case 1:
          return "floor-one";
          break;
      }
    },
    //获取上班模式 文字
    getModulsText(arg) {
      arg = parseInt(arg);
      switch (arg) {
        case 0:
          return "上班模式";
          break;
        case 1:
          return "下班模式";
          break;
        case 2:
          return "观光模式";
          break;
        case 3:
          return "加班模式";
          break;
      }
    }
  },
  filters: {
    dateFormat(date, fmt) {
      var dt = new Date(parseInt(date));
      var o = {
        "M+": dt.getMonth() + 1, //月份
        "d+": dt.getDate(), //日
        "h+": dt.getHours(), //小时
        "m+": dt.getMinutes(), //分
        "s+": dt.getSeconds(), //秒
        "q+": Math.floor((dt.getMonth() + 3) / 3), //季度
        S: dt.getMilliseconds() //毫秒
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (dt.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      return fmt;
    }
  }
};
</script>


